<template>
	<view class="user">
		<!-- 头部 -->
		<view class="user-wrap">
			<view class="setting iconfont icon31shezhi"></view>
			<view class="info">
				<image class="avatar" mode="aspectFill" :src="userInfo.headPicUrl"></image>
				<view class="nickname">{{ userInfo.nickName }}</view>
			</view>
		</view>
		<!-- 用户功能 -->
		<view class="com-item">
			<view class="com-wrap">
				<view class="cell" v-for="(item, index) in userList" :key="index" @click="gotouser(item.url)">
					<view class="cell-left">
						<image class="cell-icon" :src="item.icon" mode="aspectFill"></image>
						<view class="cell-text">{{ item.title }}</view>
					</view>
					<view class="iconfont iconmore1"></view>
				</view>
			</view>
		</view>

		<!-- 用户服务 -->
		<view class="com-item">
			<view class="com-wrap">
				<view class="cell" v-for="(item, index) in serverList" :key="index">
					<view class="cell-left">
						<image class="cell-icon" :src="item.icon" mode="aspectFill"></image>
						<view class="cell-text">{{ item.title }}</view>
					</view>
					<view class="iconfont iconmore1"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

export default {

	data() {
		return {
			userInfo: {
				headPicUrl: '',
				nickName: ''
			},
			currentIndex: 0,
			userList: [
				{
					title: '我的发布',
					icon: '/static/icons/icon-fabu.png',
					path: 'collect-list',
					url:'/pages/user/user-done/index'
				},
				{
					title: '我的收藏',
					icon: '/static/icons/icon-collect.png',
					path: 'browse-list',
					url:'/pages/user/user-favorite/index'
				}
			],
			serverList: [
				{
					title: '帮助中心',
					icon: '/static/icons/icon-help.png',
					path: 'help'
				},
				{
					title: '版本',
					icon: '/static/icons/icon-about.png',
					text: '1.0.0'
				}
			]
		};
	},
	methods:{
		gotouser(url){
			console.log(url)
			uni.navigateTo({
				url
			})
		},
		async getUser(){
			/*var that=this
			uni.getStorage({
			    key: 'url',
			    success: function (res) {
					console.log(res.data)
			        that.userInfo.headPicUrl=res.data;
			    }
			});
			uni.getStorage({
			    key: 'name',
			    success: function (res) {
					console.log(res.data)
			        that.userInfo.nickName=res.data;
			    }
			});
			console.log(that.userInfo)*/
			const res=await this.$myRequest({
				url:'/User/api/find/id=10001'
			})
			this.userInfo.headPicUrl=res.data.avatarUrl
			this.userInfo.nickName=res.data.name
		}
	},
	onLoad()
	{
		this.getUser()
	}
		
	
};
</script>

<style lang="scss">
page {
	background: #f2f2f2;
}
.btn-hover {
	background: #f2f2f2 !important;
}
.user {
	.user-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50vw;
		padding: 30rpx;
		z-index: 9;
		border-radius: 0 0 20% 20%;
		background: url('https://handsel.oss-cn-shenzhen.aliyuncs.com/1588938371592.jpg') no-repeat;
		background-size: cover;
		.setting {
			color: #fff;
			position: absolute;
			top: 60rpx;
			left: 60rpx;
			font-size: 50rpx;
		}
		.info {
			position: absolute;
			text-align: center;
			.avatar {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
			}
			.nickname {
				color: #fff;
				font-size: 28rpx;
			}
		}
	}
	
	.com-item {
		padding-left: 20rpx;
		padding-right: 20rpx;
		margin-top: 20rpx;
		.com-wrap {
			border-radius: 25rpx;
			overflow: hidden;
		}
	}
	.cell {
		height: 80rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		border-bottom: 1px solid #f8f8f8;
		&:active {
			background: #f2f2f2;
		}
		&:last-child {
			border-bottom: none !important;
		}
		.cell-left {
			display: flex;
			align-items: center;
			.cell-icon {
				width: 50rpx;
				height: 50rpx;
			}
			.cell-text {
				color: #666;
				font-size: 28rpx;
				margin-left: 20rpx;
			}
		}
		.iconfont {
			font-size: 40rpx;
			color: #999;
		}
	}
}
</style>